<template>
    <fieldset>
        <legend>tab切换案例</legend>
        <button v-for="btn in buttons" :key="btn" :class="['tab-button',{active:btn===selectBtn}]" @click="handleClick(btn)">{{btn}}</button>
        <div class="tab" :is="dynamic">54222</div>
    </fieldset>
</template>

<script>
import emailCom from "./emall-com.vue"
import homeCom from "./home-com.vue"
import mineCom from "./mine-com.vue"
//js对象中的key一定是字符串类型

//需求
//1.点击按钮，让对应的按钮高亮，编程的思路就是 点某个按钮的时候 给按钮加上active的类名
//2.通过is属性来实现对组件名字的切换

export default{
        data(){
            return{
                buttons:['email','home','mine'],
                selectBtn:"email",
            }
        },
        methods:{
            handleClick(btn){
                console.log(btn)
                this.selectBtn = btn
            }
        },
        computed:{
            dynamic(){
                return this.selectBtn+'-com'
            }
        },
        components:{
            'email-com':emailCom,
            'mine-com':mineCom,
            'home-com':homeCom
        }
    }
</script>
<style scoped>
    .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .tab-button:hover {
        background: #e0e0e0;
    }

    .tab-button.active {
        background: hotpink;
    }

    .tab {
        border: 1px solid #ccc;
        padding: 10px;
    }
    h1 {
        margin:0;
    }
</style>

